<body>
	<button onclick="addData()">插入数据</button>

	<button onclick="getData()">获取 全部 数据</button>

	<button onclick="getDataById()">通过 主键 获取数据</button>

	<button onclick="getDataByCursor()">通过 游标 获取数据</button>

	<button onclick="getDataByIndex()">通过 索引 获取数据</button>

	<button onclick="getDataByCursorIndex()">通过 游标 索引 获取数据</button>

	<button onclick="getDataByCursorIndexPage()">通过 游标 索引 分页 获取数据</button>

	<script>
		var db;

		if (window.indexedDB) {
			// 第二参数时版本号，可选，如果该值小于系统的版本号，则会链接失败
			const request = window.indexedDB.open('customer-db', '2');

			// 监听建立链接 错误 的回调
			request.onerror = function (event) {
				console.log('%c err', 'color:red;font-size:30px', event);
			};

			// 监听建立链接 成功 的回调
			request.onsuccess = function (event) {
				console.log('%c success', 'color:teal;font-size:30px', event);
				db = event.target.result;
			};

			// 数据库有更新时触发
			request.onupgradeneeded = function (event) {
				console.log('%c upgradeneeded', 'color:orange;font-size:30px', event);
				db = event.target.result;

				// 创建一个对象仓库 我们选择 uuid 作为键路径（key path） 因为 uuid 可以保证是不重复的
				if (!db.objectStoreNames.contains('customers')) {
					var objectStore = db.createObjectStore('customers', {
						keyPath: 'uuid', // 指定主键
						// autoIncrement: true  // 主键自增
					});
					// 建立一个索引 uuid , unique 是否唯一 ：是
					objectStore.createIndex('uuid', 'uuid', { unique: true });

					// 建立一个索引 name , unique 是否唯一 ：否 ，名字可能会重复，
					objectStore.createIndex('name', 'name', { unique: false });

					// 建立一个索引 age ， unique 是否唯一 ：否 ， 年龄可能重复
					objectStore.createIndex('age', 'age', { unique: false });
				}
			};
		}

		// 插入数据
		function addData() {
			const data = {
				uuid: +new Date(),
				name: '张三',
				age: Math.floor(Math.random() * 5),
				like: '苹果',
			};
			const request = db
				.transaction('customers', 'readwrite') // 要操作的对象仓库名？和下面不是冲突了吗 、 操作模式
				.objectStore('customers') // 要操作的对象仓库名
				.add(data); // 添加数据

			request.onerror = function () {
				console.log('数据插入失败');
			};
			request.onsuccess = function () {
				console.log('数据插入成功');
			};
		}

		// 直接获取 全部 数据
		function getData() {
			const customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers');

			const request = customerObjectStore.getAll();
			request.onsuccess = function (e) {
				console.log('获取成功：', e.target.result);
			};
			request.onerror = function () {
				console.log('获取失败');
			};
		}

		// 通过 主键uuid 获取数据 ，只能获取一条数据
		function getDataById() {
			const customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers');

			const request = customerObjectStore.get(1655791780402);

			request.onerror = function () {
				console.log('获取失败');
			};
			request.onsuccess = function (res) {
				console.log('获取成功：', res.target.result);
			};
		}

		// 通过 游标 获取数据，可以获取多条数据
		function getDataByCursor() {
			const result = [];

			const customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers');

			const request = customerObjectStore.openCursor();

			request.onsuccess = function (e) {
				const cursor = e.target.result;
				if (cursor) {
					result.push(cursor.value);
					cursor.continue();
				} else {
					console.log('获取成功：', result);
				}
			};
			request.onerror = function () {
				console.log('获取失败');
			};
		}

		// 通过 索引 index 获取数据 ，只能获取满足条件的第一条数据
		function getDataByIndex() {
			const customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers');

			const request = customerObjectStore.index('name').get('张三');

			request.onsuccess = function (e) {
				console.log(e.target.result);
			};
			request.onerror = function () {
				console.log('获取失败');
			};
		}

		// 通过 索引 游标 获取数据，可以获取多条数据
		function getDataByCursorIndex() {
			const result = [];

			const customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers');

			const request = customerObjectStore.index('age').openCursor(IDBKeyRange.only(3));

			request.onsuccess = function (e) {
				const cursor = e.target.result;
				if (cursor) {
					result.push(cursor.value);
					cursor.continue();
				} else {
					console.log('获取成功：', result);
				}
			};
			request.onerror = function () {
				console.log('获取失败');
			};
		}

		// 通过 索引 游标 分页 获取数据 ，可以分页获取数据 ，这里默认获取第二页数据
		function getDataByCursorIndexPage() {
			const currentPage = 2; // 第二页
			const pageSize = 3; // 每页数量
			const result = [];
			let counter = 0; // 计数器
			let advanced = false; // 是否已跳过
			const customerObjectStore = db.transaction('customers', 'readwrite').objectStore('customers');
			const request = customerObjectStore.index('age').openCursor(IDBKeyRange.only(3));
			request.onsuccess = function (e) {
				const cursor = e.target.result;
				if (cursor) {
					if (pageSize > 1 && !advanced) {
						advanced = true;
						cursor.advance(pageSize * (currentPage - 1)); //TODO: 跳过当前页的前面所有页数据
						return;
					}
					counter++;
					result.push(cursor.value);
					counter < pageSize ? cursor.continue() : console.log('分页查询结束1：', result);
				} else {
					console.log('分页查询结束2：', result);
				}
			};
			request.onerror = function () {
				console.log('获取失败');
			};
		}
	</script>
</body>
